<template>
	<view class="dec-img-ad" :style="[wrapStyle]">
		<view class="img-list" v-if="content.styleContentType === 'noScroll'">
			<view class="img-item" v-for="(img, index) in content.imgList" :key="img.url" :style="{
				width: img.width ? (img.width * 2) + 'rpx' : (100 / content.imgList.length) + '%',
				marginRight: index === (content.imgList.length - 1) ? 0 : wrapStyle.imgMargin}">
				<image :src="img.url" :style="{width: '100%', height: (img.height * 2) + 'rpx'}" @click="goTarget(img)" />
			</view>
		</view>
		<scroll-view scroll-x="true" style="white-space: nowrap;" v-else>
			<view class="img-list-scroll">
				<view class="img-item" v-for="(img, index) in content.imgList" :key="img.url" :style="{
					width: img.width ? (img.width * 2) + 'rpx' : (100 / content.imgList.length) + '%',
					marginRight: index === (content.imgList.length - 1) ? 0 : wrapStyle.imgMargin}">
					<image :src="img.url" :style="{width: img.width * 2 + 'rpx', height: (img.height * 2) + 'rpx'}" @click="goTarget(img)" />
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props: {
			content: {
				type: Object,
				default: () => {}
			}
		},
		computed: {
			wrapStyle() {
				return {
					padding: `${this.content.padding * 2 || 0}rpx ${this.content.padding * 2 || 0}rpx`,
					backgroundColor: this.content.bgColor || 'transparent',
					imgMargin: `${this.content.imgMargin * 2 || 0}rpx`
				}
			},
		},
		methods: {
			goTarget(data) {
				if (!data || !data.linkUrl) return;
				if (data.linkType === 'linkMini') {
					uni.navigateToMiniProgram({
						appId: data.linkUrl,
						path: '/pages/index/index'
					})
				} else if (data.linkUrl === '/pages/my/my') {
					uni.switchTab({
						url: data.linkUrl
					})
				} else {
					uni.navigateTo({
						url: data.linkUrl
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dec-img-ad {
		display: flex;
		width: 750rpx;
	}

	.img-list {
		display: flex;
		width: 100%;
	}

	.scroll-content {
		width: 100%;
	}

	.img-list-scroll {
		display: flex;
		width: 100%;
	}

	.img-item {
		display: inline-flex;
	}
</style>